<template>
    <div class="app-container dialog">
        <div class="title">访问权限</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input readonly style="width: 760px" v-model="form.title"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="联系人" prop="contact_person">
                        <el-input
                            readonly
                            v-model="form.contact_person"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="负责人" prop="person_in_charge">
                        <el-input
                            readonly
                            v-model="form.person_in_charge"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系方式" prop="contact_information">
                        <el-input
                            readonly
                            v-model="form.contact_information"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio disabled label="true">是</el-radio>
                            <el-radio disabled label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="audit_unit"
                    >
                        <el-cascader
                            disabled
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="deptChange"
                            v-model="officeId"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核人员"
                        prop="Auditunit"
                    >
                        <el-select
                                disabled
                                clearable
                                style="width: 200px"
                                v-model="form.audit_person"
                                :placeholder="
                                    form.officeId
                                        ? '请选择审核人员'
                                        : '请先选择审核部门'
                                "
                            >
                                <el-option
                                    v-for="item in users"
                                    :key="item.userName"
                                    :label="item.nickName"
                                    :value="item.userName"
                                >
                                </el-option>
                            </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="Subhead">需求信息</div>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="应用系统" prop="appSystem">
                        <el-select
                            disabled
                            clearable
                            filterable
                            v-model="form.appSystem"
                        >
                            <el-option
                                v-for="item in xtList"
                                :key="item.id"
                                :label="item.projectname"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="tabletitle">
                访问权限明细
                <img
                    v-if="false"
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    @click="add()"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </div>
            <Table :columns="columns" :data="data">
                <template
                    slot-scope="{ row, index }"
                    slot="networkEnv">
                    <el-select
                        disabled
                        clearable
                        filterable
                        v-model="data[index].networkEnv"
                    >
                        <el-option
                            v-for="item in networkList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template
                    slot-scope="{ row, index }"
                    slot="IPAddress">
                    <el-input readonly v-model="data[index].IPAddress"></el-input>
                </template>
                <template
                    slot-scope="{ row, index }"
                    slot="portNumber">
                    <el-input readonly v-model="data[index].portNumber"></el-input>
                </template>
                <template slot-scope="{ row, index }" slot="portType">
                    <el-select
                        disabled
                        clearable
                        filterable
                        v-model="data[index].portType"
                    >
                        <el-option
                            v-for="item in portTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="AuthorityRequirements">
                    <el-select
                        disabled
                        clearable
                        filterable
                        v-model="data[index].AuthorityRequirements"
                    >
                        <el-option
                            v-for="item in AuthorityRequirementsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="OpeningHours">
                    <el-select
                        disabled
                        clearable
                        filterable
                        v-model="data[index].OpeningHours"
                    >
                        <el-option
                            v-for="item in OpeningHoursList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="remarks">
                    <Input
                        readonly
                        type="text"
                        v-model="data[index].remarks"
                    />
                </template>

                <template v-if="false" slot-scope="{ row, index }" slot="action">
                    <!-- <Button @click="handleSave(row, index)">保存</Button> -->
                    <Button type="error" @click="remove(index)">删除</Button>
                    <!-- <div v-if="editIndex === index">
                    <Button @click="handleSave(index)">保存</Button>
                    <Button @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                    <Button @click="handleEdit(row, index)">操作</Button>
                    <Button type="error" @click="remove(index)">删除</Button>
                </div> -->
                </template>
            </Table>
            <file-list ref="fileList" dontAction="true" :fileList="form.files"/>
        </el-form>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { listUser2 } from "@/api/system/user";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js"
import { Getformdata,taskComplete } from "@/api/todoItem/todo.js";
import fileList from "@/components/FileList/index.vue";
export default {
    name: "AccessRightssDonedetails",
    components: {
        Editor,fileList
    },
    data() {
        return {
            loading:false,
            taskName:'',
            title:'',
            taskId:'',
            definitionName:'',
            btnLoading:true,
            form: {
                unit_audit:'false',
                audit_unit:null,
                audit_person:null,
            },
            //部门列表树结构
            dept: [],
            //上云系统列表
            xtList: [],
            // 部门id
            officeId:'',
            // 关机时间下拉数组
            ShutDownList: [
                {
                    id: "上班时间",
                    name: "上班时间",
                },
                {
                    id: "非上班时间",
                    name: "非上班时间",
                },
                {
                    id: "不能关闭",
                    name: "不能关闭",
                },
                {
                    id: "其他时间",
                    name: "其他时间",
                },
            ],
            // 系统状态
            SystemStateList: [
                {
                    id: "从系统选择",
                    name: "从系统选择",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            // 操作系统下拉数据
            operatingSystemList: [
                {
                    id: "Linux",
                    name: "Linux",
                },
                {
                    id: "Windows",
                    name: "Windows",
                },
            ],
            // 网络环境下拉数据
            networkList: [
                {
                    id: "政务外网",
                    name: "政务外网",
                },
                {
                    id: "互联网",
                    name: "互联网",
                },
            ],
            portTypeList:[
                {
                    id:'TCP',
                    name:'TCP'
                },
                {
                    id:'UDP',
                    name:'UDP'
                },
                {
                    id:'TCP/UDP',
                    name:'TCP/UDP'
                }
            ],
            // 交互类型
            ExchangeType:[
                {
                    id:'资源池内交互',
                    name:'资源池内交互'
                },
                {
                    id:'跨网交互',
                    name:'跨网交互'
                },
                {
                    id:'其他交互',
                    name:'其他交互'
                },
            ],
            // 交互方式
            InteractionModeList:[
                {
                   id:'协议交互',
                   name:'协议交互' 
                },
                {
                   id:'文件交互',
                   name:'文件交互' 
                },
                {
                   id:'数据库交互',
                   name:'数据库交互' 
                }
            ],
            // 协议下拉数据
            agreementList:[
                {
                    id:'http',
                    name:'http'
                },
                {
                    id:'https',
                    name:'https'
                },
                {
                    id:'ftp',
                    name:'ftp'
                },
                {
                    id:'snmp',
                    name:'snmp'
                },
                {
                    id:'其他',
                    name:'其他'
                }
            ],
            AuthorityRequirementsList:[
                {
                    id:'开放',
                    name:'开放'
                },
                {
                    id:'关闭',
                    name:'关闭'
                },
                {
                    id:'临时开放',
                    name:'临时开放'
                },
                {
                    id:'临时关闭',
                    name:'临时关闭'
                },
            ],
            // 交互时间
            InteractionTimeList:[
                {
                    id:'每月',
                    name:"每月"
                },
                {
                    id:'每周',
                    name:"每周"
                },
                {
                    id:'每天',
                    name:"每天"
                },
                {
                    id:'实时',
                    name:"实时"
                },
                {
                    id:'不定期',
                    name:"不定期"
                },
                {
                    id:'其他',
                    name:"其他"
                }
            ],
            OpeningHoursList:[
                {
                    id:'永久',
                    name:"永久"
                },
                {
                    id:'一天',
                    name:"一天"
                },
                {
                    id:'一周',
                    name:"一周"
                },
                {
                    id:'一月',
                    name:"一月"
                },
                {
                    id:'其他',
                    name:"其他"
                }
            ],
            rules: {},
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            columns: [
                {
                    title: "网络环境",
                    slot: "networkEnv",
                },
                {
                    title: "IP地址",
                    slot: "IPAddress",
                },
                {
                    title: "端口号",
                    slot: "portNumber",
                },
                {
                    title: "端口类型",
                    slot: "portType",
                },
                {
                    title: "权限要求",
                    slot: "AuthorityRequirements",
                },
                {
                    title: "开放时间",
                    slot: "OpeningHours",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            data: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem:'',
            editIpType:'',
            editPortManage:'',
            editport:'',
            editportType:'',
            editremarks:'',
            IsUnitAudit:false,
            // 用户数据
            users:[]
        };
    },
    created() {
        this.Getdata();
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        },
        routerUrl(){
            return this.$route.path
        }
    },
    watch: {
        visitedViews(value) {
            if(value){
                if(this.$options.name == 'AccessRightssDonedetails'){
                    return
                }
                this.$destroy(this.$options.name)
            }
        },
        routerUrl(value){
            if(value == '/businessassistance/AccessRightss/Donedetails'){
                this.Getdata()
            }
        }
    },
    methods: {
        Getdata(){
            this.GetListSelect()
            var list = JSON.parse(sessionStorage.getItem('AccessRightssDonedetails'));
            this.btnLoading = false
            Getformdata(list.processInstanceId).then(res=>{
                this.form = res.data
                this.fileList = res.data.files
                if(this.form.unit_audit == 'true'){
                    this.IsUnitAudit = true
                    this.officeId = Number(this.form.audit_unit)
                    this.deptChange([this.form.audit_unit])
                }
                this.data = res.data.access_rights_detailed
            })
        },
        getName(data, id) {
            data.forEach((item) => {
                if (item.id == id) {
                    this.form.officeName = item.label;
                } else if (item.children && item.children.length) {
                    this.getName(item.children, id);
                }
            });
        },
        deptChange(e) {
            this.users = [];
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
                this.getName(this.dept, this.form.audit_unit);
                listUser2({
                    deptId: this.form.audit_unit,
                    pageNum: 1,
                    pageSize: 10000000,
                }).then((response) => {
                    this.users = response.rows;
                });
            }
        },
        UnitAuditChange(e) {
            if(e == 'true'){
                this.IsUnitAudit = true
            }else{
                this.IsUnitAudit = false
                this.form.audit_unit = null
                this.form.audit_person = null
                this.officeId = null
            }
        },
        GetListSelect() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
            AllcloudUpList().then((response) => {
                this.xtList = response.rows;
            });
        },
        DeleteFile(data, index) {
            this.fileList = this.fileList.filter((item) => {
                if (item.uid == data.uid) {
                } else {
                    return item;
                }
            });
        },
        add() {
            let addObj = JSON.parse(JSON.stringify({
                portType:'TCP',
                remarks:''
            }))
            this.data.push(addObj);
        },
        handleSave(row,index) {
            this.data[index] = row
        },
        remove(index) {
            this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.data.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        changeExamineShow(num,leble){
            this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            inputValue:num == 1 ? '通过': '不通过',
            }).then((resp) => {
                this.form.access_rights_detailed = this.data
                taskComplete({
                    taskId: this.taskId,
                    actionName: num == 1 ? '通过': '不通过',
                    action: num == 1 ? 'COMPLETE': 'BACK',
                    formData: this.form,
                    formDefKey:this.form.formDefKey,
                    files:this.fileList,
                    comment:resp.value
                }).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            type: 'success',
                            message: res.msg
                        }); 
                        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                        this.$destroy(this.$options.name)
                        this.$router.push('/todoItem/todo')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        }
    },
};
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle {
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248, 248, 249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>